<template>
    <div class="list">
        <el-container class="wrapper">
            <!-- 左边导航目录部分 -->
            <el-aside :width="isCollapse ?'64px':'222px'" style="background-color: rgb(37,102,206)">
                <div class="logo">
                    <img src="../../assets/logo.png" alt="">
                    <span>天津市安全生产责任保险信息系统(应急)</span>
                </div>
                <el-menu :default-openeds="['1']" :collapse="isCollapse" 
                :collapse-transition="false" router 
                background-color= "#2566CE" text-color="white" active-text-color="white"
                :default-active="$route.path">
                    <el-submenu index="1" >
                        <template slot="title">
                            <i class="el-icon-coin" style="color:white"></i>
                            <span>后台管理</span>
                        </template>
                        <!-- <el-menu-item index="/organization">
                            <i class="el-icon-office-building" style="color:white"></i>
                            <span>企业管理</span>
                        </el-menu-item>
                        <el-menu-item index="/role">
                            <i class="el-icon-s-custom" style="color:white"></i>
                            <span>角色管理</span>
                        </el-menu-item>
                        <el-menu-item index="/relation">
                            <i class="el-icon-s-opportunity" style="color:white"></i>
                            <span>集团关系</span>
                        </el-menu-item> -->
                        <el-menu-item v-for="(item,index) in menu" :key="index" 
                        :index="item.index"
                        @click="saveNavState(item.index)">
                            <i :class="item.i" style="color:white"></i>
                            <span>{{item.name}}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 右边主体部分 -->
                <el-header>
                    <div class="header-left">
                        <span class="toggle-button" @click="toggleClick"><i :class="isCollapse ?'el-icon-s-unfold':'el-icon-s-fold'"></i></span>
                        <span>欢迎您：{{organization_name}}</span>
                    </div>
                    <div class="header-right">
                        <span class="message"><i class="el-icon-bell"></i></span>
                        <el-avatar icon="el-icon-user-solid" class="image"></el-avatar>
                        
                        <el-dropdown >
                            <span class="el-dropdown-link">
                                <!-- admin -->
                                <span>{{userName}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="changePasswordDialog=true">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

        <!-- 修改密码的对话框 -->
        <el-dialog
            title="修改密码"
            :visible.sync="changePasswordDialog"
            width="50%"
            append-to-body>
            <el-form :model="changePasswordForm" :rules="changePasswordRules"
                ref="changePasswordFormRef" label-width="150px">
                <el-form-item label="旧密码：" prop="oldpsw">
                    <el-input v-model="changePasswordForm.oldpsw" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop="newpsw">
                    <el-input v-model="changePasswordForm.newpsw" show-password></el-input>
                </el-form-item>
                <el-form-item label="重复密码：" prop="repatepsw">
                    <el-input v-model="changePasswordForm.repatepsw" show-password></el-input>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changePassword">提交</el-button>
                <el-button @click="changePasswordDialog = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Oidc from "oidc-client";
import { request } from '../../api/axios'
import { checkPassword,checkPswLength } from "../../api/check"

export default {
    name:"list",
    created(){
    },
    data(){
        let validatePass = (rule, value, callback) => {
            if (value != this.changePasswordForm.repatepsw) {
                callback(new Error('新密码与重复密码要求一致'));
            } else {
                callback();
            }
        }
        return{
            // 用户名信息
            userName:"",
            // 组织名
            organization_name:"",

            // 菜单是否折叠
            isCollapse:false,
            // 菜单中的数据
            menu:[
                {name:"企业管理",index:"/organization",i:"el-icon-office-building"},
                {name:"角色管理",index:"/role",i:"el-icon-s-custom"},
                {name:"集团关系",index:"/relation",i:"el-icon-s-opportunity"}
            ],

            // 保存激活的链接地址
            activePath:"/organization",

            // 修改密码对话框的显示与隐藏
            changePasswordDialog:false,
            // 修改密码参数
            changePasswordInfo:{
                user_id: "",    //用户ID
                login_account: "",      //登录账号
                loginPassword: "",
                newLoginPassword: ""
            },
            // 修改密码对话框的表单参数
            changePasswordForm:{
                oldpsw: "",
                newpsw: "",
                repatepsw: "",
            },
            // 修改密码表单验证
            changePasswordRules:{
                oldpsw:[
                    {required:true,message:"请输入旧密码",trigger:"blur"},
                    {validator:checkPswLength,trigger: "blur"},
                    {validator:checkPassword}
                ],
                newpsw: [
                    {required: true, message: "请输入新密码", trigger: "blur" },
                    {validator:checkPswLength,trigger: "blur"},
                    {validator:checkPassword}
                ],
                repatepsw: [
                    {required: true, message: "请再次输入密码", trigger: "blur" },
                    {validator:checkPswLength,trigger: "blur"},
                    { validator:checkPassword},
                    { validator: validatePass, trigger: "blur" }
                ]
            },
        }
    },
    created(){
        this.activePath = window.sessionStorage.getItem("activePath")
        this.userName = window.sessionStorage.getItem("UserName")
        this.getUser()
    },
    methods:{
        // 点击按钮，菜单展开
        toggleClick(){
            this.isCollapse=!this.isCollapse
        },

        // 保存菜单栏链接的激活状态
        saveNavState(activePath){
            window.sessionStorage.setItem("activePath",activePath)
            this.activePath=activePath
        },

        // 点击退出登录
        exit(){
            this.$confirm('您确定要退出该系统么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log("退出登录");
                let config = process.env.OIDC;
                let mgr = new Oidc.UserManager(config);
                mgr.signoutRedirect()
                .then(function(v){
                    window.sessionStorage.clear();
                    window.localStorage.clear();
                })
            })
        },

        // 获取该账户信息
        getUser(){
            let info={
                pageIndex: 0,
                pageSize: 0,
                ilist: [
                    {
                    title: "string",
                    content: "string"
                    }
                ]
            }
            request("post","/User_Info/GetStatus",info)
            .then(res =>{
                console.log(res.resultList)
                for(let i=0;i<res.resultList.length;i++){
                    if(res.resultList[i].user_name==window.sessionStorage.getItem("UserName")){
                        this.changePasswordInfo.login_account = res.resultList[i].user_nickname
                        this.organization_name=res.resultList[i].organization_name
                    }
                }
            })
        },

        // 修改密码
        changePassword(){
            this.changePasswordInfo.user_id = window.sessionStorage.getItem("UserID")
            this.changePasswordInfo.loginPassword=this.changePasswordForm.oldpsw
            this.changePasswordInfo.newLoginPassword=this.changePasswordForm.newpsw
            console.log(this.changePasswordInfo)
            this.$refs.changePasswordFormRef.validate(valid =>{
                if(!valid) return
                request("post","User_Info/UpdateChangePasswordStatus",this.changePasswordInfo)
                .then(res =>{
                    console.log(res)
                    this.changePasswordDialog=false
                })
            })
        },
    }
}
</script>

<style scoped>
.el-menu .el-submenu{
    text-align: left;
    padding: 0px;
}
.wrapper{
    position: fixed;
    width: 100%;
    height: 100%;
}
.logo{
    width: 222px;
    height: 60px;
    background-color: #0846B9;
}
.logo img{
    /* width: 40px; */
    display: inline-block;
    height: 40px;
}
.logo span{
    width: 70%;
    display: inline-block;
    line-height: 20px;
    font-size: 15px;
    text-align: center;
    margin-top: 10px;
    padding-left: 5px;
    color: white;
}
.el-header{
    background-color: #fff;
    color: #333;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.toggle-button i{
    font-size: 18px;
    color: rgb(37,102,206);
}
.header-right{
    display: flex;
    align-items: center;
    margin-right: 20px;
}
.message i{
    font-size: 18px;
    color: rgb(37,102,206);
    margin-right: 50px;
}
.image{
    margin-right: 10px;
}
.el-dropdown-link i{
    font-size: 22px;
    color: rgb(37,102,206);
}

.el-main{
    width: 100%;
    /* min-width: 1160px; */
    background-color: #F5F5F5;
}

/* 左侧菜单栏 */
.el-menu{
    border-right: none;
}
.el-menu .el-menu-item.is-active {
  background: #1A57BB !important;
}
.el-menu .el-submenu__title.is-active {
  background: #1A57BB !important;
}

/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}
</style>